<template>
    <div class="delivery_login">
        <top-timer/>
        <div class="login_box">
            <p class="login_title center font_M font_40 col_333">
                <!--                <span @click="loginType='01'" :class="loginType==='01'?'title_active':''">扫码登录</span>-->
                <span @click="loginType='02'" :class="loginType==='02'?'title_active':''">手机号登录</span>
            </p>
            <div class="form" v-if="loginType==='02'">
                <div class="flex">
                    <div class="border1" v-if="keyboard.borderNum==='01'"></div>
                    <!--<el-input v-model="phone" placeholder="输入手机号码" />-->
                    <el-input class="phone" placeholder="输入手机号码" v-model="phone" readonly="readonly"
                              data-layout="numeric"
                              @focus="show($event,'01')" :class="keyboard.borderChecked==='01'?'input_checked':''"/>
                    <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                        :accept="accept" :input="input"/>
                </div>
                <div class="flex">
                    <div class="border1" v-if="keyboard.borderNum==='02'"></div>
                    <!--<el-input class="flex1" v-model="kaptcha" placeholder="图片验证码"></el-input>-->
                    <el-input placeholder="图片验证码" v-model="kaptcha" readonly="readonly" data-layout="compact"
                              @focus="show($event,'02')" :class="keyboard.borderChecked==='02'?'input_checked':''"/>
                    <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                        :accept="accept" :input="input"/>
                    <div @click="getKaptcha">
                        <img :src="imgSrc" alt="">
                    </div>
                </div>
                <div class="flex">
                    <div class="border1" v-if="keyboard.borderNum==='03'"></div>
                    <!--<el-input class="flex1" v-model="checkCode" placeholder="短信验证码"></el-input>-->
                    <el-input placeholder="短信验证码" v-model="checkCode" readonly="readonly" data-layout="numeric"
                              @focus="show($event,'03')" :class="keyboard.borderChecked==='03'?'input_checked':''"/>
                    <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                        :accept="accept" :input="input"/>
                    <div class="kap_btn" :class="canNotClick?'col_999':''" @click="!canNotClick?getCheckMsgCode():''">
                        {{canNotClick?`(${timeVal}s)重新获取`:'获取验证码'}}
                    </div>
                </div>
                <el-button type="primary" class="col_fff font_M" @click="redirectHome()">确认</el-button>
            </div>
            <div class="qr_code center" v-if="loginType==='01'">
                <img src="@/assets/img/mini.png" alt="">
                <div>支持微信、麦智克小程序扫描</div>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>

  export default {
    name: 'delivery-login',
    components: {},
    data () {
      return {
        loginType: '02',
        canNotClick: false,
        timeVal: 60,
        tempToken: '',
        imgSrc: '',
        phone: '',
        kaptcha: '',
        checkCode: '',

        keyboard:{
          visible: false,
          layout: 'compact',
          input: null,
          borderNum: '',
          borderChecked:'',
          options:{
            useKbEvents: false,
            preventClickEvent: false,
          }
        }
      }
    },
    created () {
      this.getKaptcha()
    },
    mounted () {
    },
    methods: {
      accept (text) {
        this.hide()
      },
      show (e, borderNum) {
        this.keyboard.borderNum = borderNum
        this.keyboard.borderChecked = borderNum
        if (e.path[0].value !== '') {
          this.keyboard.borderNum = ''
        }
        this.input = e.target
        this.keyboard.layout = e.target.dataset.layout
        if (!this.keyboard.visible)
          this.keyboard.visible = true
      },
      hide () {
        this.keyboard.visible = false
        this.keyboard.borderNum = ''
      },
      redirectHome () {
        if (!this.phone) {
          this.$alert('请输入手机号', '提示', {
            confirmButtonText: '确定',
          })
          return
        }
        if (!this.$global.isPhone(this.phone)) {
          this.$alert('请输入正确手机号', '提示', {
            confirmButtonText: '确定',
          })
          return
        }
        if (!this.kaptcha) {
          this.$alert('请输入图片验证码', '提示', {
            confirmButtonText: '确定',
          })
          return
        }
        if (!this.checkCode) {
          this.$alert('请输入短信验证码', '提示', {
            confirmButtonText: '确定',
          })
          return
        }
        this.$axios.post('cabLoginRest/senderLogin', {
          phone: this.phone,
          checkCode: this.checkCode,
        }).then(res => {
          if (res.data.result) {
            this.$message.success('登录成功')
            localStorage.setItem('token', res.data.obj.token)
            localStorage.setItem('deliveryPhone', res.data.obj.user.phone)
            this.$router.replace({path: 'home', query: {isAdmin: true}})
          } else {
            this.$alert(res.data.msg, '登录提示', {
              confirmButtonText: '确定',
            })
            this.getKaptcha()
          }
        })
      },
      phoneKaptcha () {
        let self = this
        self.canNotClick = true
        let fan = setInterval(function () {
          self.timeVal--
          if (self.timeVal <= 0) {
            clearInterval(fan)
            self.canNotClick = false
            self.timeVal = 60
          }
        }, 1000)
      },
      // 获取验证码
      getKaptcha () {
        this.$axios.get('captchaRest/getTempToken').then(res => {
          if (res.data.result) {
            this.tempToken = res.data.msg
            this.imgSrc = this.$global.API + 'captchaRest/getValidateImg?tempToken=' + this.tempToken
          }
        })
      },
      // 获取短信验证码
      getCheckMsgCode () {
        if (!this.phone) {
          this.$alert('请输入手机号', '提示', {
            confirmButtonText: '确定',
          })
          return
        }
        if (!this.$global.isPhone(this.phone)) {
          this.$alert('请输入正确手机号', '提示', {
            confirmButtonText: '确定',
          })
          return
        }
        if (!this.kaptcha) {
          this.$alert('请输入图片验证码', '提示', {
            confirmButtonText: '确定',
          })
          return
        }
        this.$axios.get('regRest/getCheckMsgCode', {
          params: {
            phone: this.phone,
            type: '05',
            kaptcha: this.kaptcha,
            tempToken: this.tempToken,
          },
        }).then(res => {
          this.phoneKaptcha()
          if (res.data.result) {
            this.$message.success('发送成功')
          } else {
            this.$alert(res.data.msg, '错误提示', {
              confirmButtonText: '确定',
            })
            this.canNotClick = false
            this.timeVal = 60
            this.getKaptcha()
          }
        })
      },
    },
  }
</script>

<style lang="scss">
    .ui-keyboard-case {
        font-size: 40px;
        text-align: center;
        /* background: #fefefe; */
        border: 1px solid #ffe3e2;
        padding: 4px;
        width: 38%;
        height: auto;
        margin-right: 5%;
        /* left: 25%; */
        /* top: auto;
        bottom: 0px; */
        /* position: fixed; */

    }

    .delivery_login {
        .login_box {
            .login_title {
                margin-top: 0.60rem;
                margin-bottom: 0.20rem;
                font-size: 0.40rem;
                color: #999;

                span {
                    display: inline-block;
                    margin: 0 0.30rem;
                }

                .title_active {
                    color: #0A68CA;
                    border-bottom: 0.04rem solid #0A68CA;
                }
            }

            .form {
                padding: 0 0.80rem;
                .flex {
                    align-items: flex-end;
                    position: relative;
                    .border1 {
                        position: absolute;
                        height: 0.4rem;
                        border-left: 1px solid #000;
                        top: 0.8rem;
                        z-index: 99;
                        left: 0.3rem;
                    }
                }

                .el-input {
                    margin-top: 0.40rem;
                    border-radius: 0.16rem;
                    background-color: #ECF5FC;
                    overflow: hidden;
                    border: 1px solid transparent;
                }

                input {
                    padding: 0 0.40rem;
                    border: none;
                    background-color: #ECF5FC;
                    line-height: 1.20rem;
                    height: 1.20rem;
                    font-size: 0.36rem;
                    border-radius: 0.16rem;
                    &::placeholder {
                        color: #999999;
                    }
                }
                .input_checked{
                    border:1px solid #0a82ec;
                }

                img {
                    width: 3rem;
                    height: 1.20rem;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 0.16rem;
                    border: 0.02rem solid rgba(224, 224, 224, 1);
                    margin-left: 0.40rem;
                }

                .kap_btn {
                    width: 5rem;
                    height: 1.20rem;
                    background: rgba(236, 245, 252, 1);
                    border-radius: 0.16rem;
                    margin-left: 0.40rem;
                    font-size: 0.36rem;
                    color: #0A82EC;
                    line-height: 1.20rem;
                    text-align: center;
                }

                .col_999 {
                    color: #999;
                }
            }

            .err_box {
                margin-top: 1.50rem;

                img {
                    margin-bottom: 0.60rem;
                }

                .err_content {
                    margin-top: 0.20rem;
                }

                button {
                    width: calc(100% - 1.60rem);
                    position: absolute;
                    left: 0.80rem;
                    right: 0.80rem;
                    bottom: 1.00rem;
                }
            }

            button {
                width: 100%;
                height: 1.20rem;
                font-size: 0.50rem;
                border-radius: 0.70rem;
                background-color: #0A82EC;
                margin-top: 0.80rem;
            }

            .qr_code {
                div {
                    font-size: 0.36rem;
                    color: #717171;
                    margin: 0.20rem 0;
                }
            }
        }
    }
</style>
